// 页面加载完成后调用轮播图方法
window.onload = carousel();

/*
    点击样式切换
*/
function change(obj, selfName, activeName) {
    // 获取所有的li元素节点
    let items = document.querySelectorAll(selfName);
    console.log(items);
    // 获取当前点击的index
    let currentIndex = obj.dataset.index;
    console.log(obj.dataset.index);
    for (let i = 0; i < items.length; i++) {
        if (currentIndex === items[i].getAttribute("data-index")) {
            // 给当前选中的添加active
            items[i].classList.add(activeName);

            //className方法会把之前设置的类名覆盖
            // items[i].className = activeName;
        } else {
            // 移出未选中的active
            items[i].classList.remove(activeName);
        }
    }

}



/*
    头部轮播图
*/
function carousel() {
    // 获取所有的图片
    let items = document.querySelectorAll(".slide");
    console.log(items);
    // 获取底部所有的小圆点
    let points = document.querySelectorAll(".point");
    console.log(points);
    // 默认
    let index = 0
    // 获取轮播图外层容器
    let all = document.querySelector(".swiper");
    let time = 0;//定时器跳转参数初始化

    // 清除active样式
    let clearActive = function () {
        for (let i = 0; i < items.length; i++) {
            items[i].className = 'slide';
        }
        for (let j = 0; j < points.length; j++) {
            points[j].className = 'point';
        }
    }

    //切换active样式
    let goIndex = function () {
        clearActive();
        items[index].className = 'slide active';
        points[index].className = 'point active';
    }

    let goRight = function () {
        if (index < 2) {
            index++;
        } else {
            index = 0
        }
        goIndex();
    }

    //点击小圆点切换图片
    for (let i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function () {
            let pointIndex = this.getAttribute('data-index');
            console.log(pointIndex)
            index = pointIndex;
            goIndex();
            // 计时器清零
            time = 0;
        })
    }

    //自动轮播
    let timer;
    function play() {
        timer = setInterval(() => {
            time++;
            // console.log(time);
            if (time == 30) {
                goRight();
                time = 0;
            }
        }, 120);
    }

    play();

    // 鼠标移入清除计时器
    all.onmousemove = function () {
        clearInterval(timer);
    }

    // 鼠标移出启动计时器

    all.onmouseleave = function () {
        play();
    }
}

/*
    友情链接轮播图
*/
function link_slide() {
    let slides = document.querySelectorAll(".slide-item");
    console.log(slides);
    let left = document.getElementById("left-btn");
    let right = document.getElementById("right-btn");
    let index = 0;
    console.log(left, right)
    //清除active方法
    var clearActive = function () {
        for (i = 0; i < slides.length; i++) {
            slides[i].classList.remove('active');
        }
    }

    //改变active方法
    var goIndex = function () {
        clearActive();
        slides[index].classList.add('active');
    }

    //左按钮事件
    var goLeft = function () {
        if (index == 0) {
            index = 2;
        } else {
            index--;
        }
        goIndex();
    }

    //右按钮事件
    var goRight = function () {
        if (index < 2) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }

    // 绑定点击事件监听
    left.addEventListener('click', function () {
        goLeft();
    })

    right.addEventListener('click', function () {
        goRight();
    })

}
